<template>
    <div class="classBox">
        <!-- 头部 -->
        <div class="top">
            <span class="title">班级管理</span>
            <el-button class="classes" type="primary" @click="dialogVisible = true" v-show="isButton(49)">添加班级</el-button>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <!-- 关键字  -->
            <div>
                <div class="grid-content ep-bg-purple" />
                <span style="color: #606266; margin-right:10px; font-size: 14px;">班级名称</span>
                <el-input style="width: 220px;font-size: 13px;" v-model="data.key" placeholder="请输入关键字" />
            </div>
            <!-- 部门 -->
            <div class="section">
                <div class="example-block">
                    <span style="color: #606266; margin-right:10px; font-size: 14px;">部门</span>
                    <el-cascader v-model="data.value" :options="options" :props="props" @change="handleChange"
                        clearable />
                </div>
                <el-button type="primary" @click="query">查询</el-button>
            </div>
        </div>
        <!-- 批量删除 -->
        <div class="batchDel" v-if="batch">
            <el-button type="danger" @click="batchdele" style="font-size:12px ;">批量删除</el-button>
        </div>
        <!-- 表格 -->
        <div class="table">
            <el-table v-loading="loading" :header-cell-style="{ background: '#fafafa' }" ref="multipleTableRef"
                :data="tableData" style="width: 100%; font-size: 13px;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column property="name" label="班级名称" />
                <el-table-column property="depname" label="部门" show-overflow-tooltip />
                <el-table-column fixed="right" label="操作" width="120" v-if="isButton(50)||isButton(51)">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="edit(scope.row)"  v-show="isButton(50)">修改</el-button>
                        <el-button link type="primary" size="small" @click="dele(scope.row.id)"  v-show="isButton(51)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="demo-pagination-block">
                <el-pagination v-model:currentPage="params.page" v-model:page-size="params.psize"
                    :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" background
                    layout="total, sizes, prev, pager, next, jumper" :total="data.counts"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <!-- 弹出框 -->
        <ClassesEjectVue :editModel="editModel"></ClassesEjectVue>
    </div>
</template>

<script lang='ts' setup>
// 引入css样式
import "../../static/css/classes/classes.css"
// 引入vue样式
import { ref, reactive, toRefs, onMounted,provide, watchEffect } from "vue";
// 表格
import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
// 引入调接口数据
import { List, cascadeList, delet ,delAll} from "../../apis/classes/classApi"
import ClassesEjectVue from "../../components/classes/ClassesEject.vue";
import { getParentIdList } from "../../utils/treeUtils";
// 权限控制按钮是否隐藏方法导入
import { isButton } from "../../utils/isButton";

// 定义数据
const data = reactive({
    // 表格数据
    tableData: [],
    // 是否刷新
    isRefresh:false,
    // 搜索
    value: [],
    // 部门
    options: [],
    // 列表参数
    params: ({ page: 1, psize: 10, }),
    key: '',
    // 分页总条数
    counts: 0,
    // 加载
    loading: true,
    // 弹出框
    title: "添加",
    dialogVisible: false,
    // 批量删除是否隐藏
    batch:false,
    Data:[],
    // 添加数据
    editModel:{name:'',depid:[],id:0}
})
// 解构数据
const { tableData, params, loading, options, dialogVisible,batch ,Data,editModel} = toRefs(data)
// 共享数据
provide('data',data)
// 级联调接口
const cascadeShow = async () => {
    const res: any = await cascadeList()
    // console.log(res);
    if (res.errCode === 10000) {
        options.value = res.data.list
    } else {
        ElMessage.error(res.errMsg)
    }
}
// 搜索
const query = () => {
    listShow()
}
const props = {
    expandTrigger: 'hover',
    checkStrictly: true,
    value: 'id', label: 'name'
}
const handleChange = (e: any) => {
    data.value = e
}
// 列表展示
const listShow = async () => {
    loading.value = true
    const res: any = await List({ ...params.value, depid: data.value?data.value[data.value.length - 1]:0, key: data.key })
    // console.log(res);
    if (res.errCode === 10000) {
        tableData.value = res.data.list
        data.counts = res.data.counts
    } else {
        ElMessage.error(res.errMsg)
    }
    loading.value = false
}
// 页面加载
onMounted(() => {
    // 列表
    listShow()
    // 部门级联
    cascadeShow()
})
// 编辑
const edit = (e: any) => {
    data.dialogVisible=true
    if (e.id) {
        data.editModel.id = e.id
        data.editModel.name = e.name
        data.title = '修改'
        data.editModel.depid = getParentIdList(options.value,e.depid)
        dialogVisible.value = true
    }
}
// 表格选中
interface User {
    date: string
    name: string
    address: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<any>([])


const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
    if(val.length){
        batch.value = true
    }else if(val.length==0){
        batch.value = false
    }
}
// 删除
const del= async (ids:number)=>{
    const res:any = await delet(ids)
    console.log(res);
    if(res.errCode){
        ElMessage.success("删除成功")
        listShow()
    }else{
        ElMessage.error(res.errMsg)
    }
}
const dele = (ids:number)=>{
    ElMessageBox.confirm("确定要删除该班级吗？","提示",{
        cancelButtonText:"取消",
        confirmButtonText:"确定",
        type:'warning'
    }).then(res=>{
        del(ids)
    }).catch(error=>{
        ElMessage.error("已取消删除")
    })
}
// 批量删除
const deleAll =async (ids:any)=>{
    const res:any = await delAll(ids)
    console.log(res);
    if(res.errCode === 10000){
        ElMessage.success("删除成功")
        listShow()
    }else{
        ElMessage.error(res.errMsg)
    }
}
const batchdele = ()=>{
    Data.value = multipleSelection.value.map((item:any,index:number)=>item.id)
    ElMessageBox.confirm("确定要删除选定的班级？","提示",{
        cancelButtonText:"取消",
        confirmButtonText:"确定",
        type:'warning'
    }).then(res=>{
        deleAll(Data.value)
    }).catch(error=>{
        ElMessage.error("已取消删除")
    })
}
// 分页
const small = ref<boolean>(false)
const disabled = ref<boolean>(false)
// 条数
const handleSizeChange = (val: number) => {
    params.value.psize = val
    listShow()
}
// 页数
const handleCurrentChange = (val: number) => {
    params.value.page = val
    listShow()
}
watchEffect(()=>{
    if(data.isRefresh){
        listShow()
        data.isRefresh=false
    }
})
</script>
<style scoped lang='less'>
</style>